.tea-grid-container {
  background-color: #F7F8FA;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 32rpx 0 0;
  position: relative;

  .content-scroll-wrap {
    padding: 0 32rpx;
    box-sizing: border-box;
  }

  .pop-conn, .time-picker-conn {
    background-color: #FFFFFF;
    width: 100%;
    height: 520rpx;
  }

  .footer-wrap {
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;

    .footer-inner {
      display: flex;
      padding: 28rpx 32rpx;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #E7E7E7;
      box-sizing: border-box;

      .confirm-btn {
        width: 228rpx;
        height: 80rpx;
        background: #C5996A;
        border-radius: 62rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;

        .btn {
          font-size: 28rpx;
          font-weight: 500;
          color: #FFFFFF;
        }
      }

      .order-amount {
        display: flex;
        align-items: center;

        .count {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #1D2129;
          line-height: 40rpx;
        }

        .dao {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 40rpx;
          margin-left: 8rpx;
        }

        .money {
          height: 56rpx;
          font-size: 40rpx;
          font-weight: 500;
          color: #000000;
          line-height: 56rpx;
        }

        .time-count {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #86909C;
          line-height: 40rpx;
          margin-left: 8rpx;
        }
      }
    }
  }

  .order-wrap {
    padding: 22rpx 16rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    box-sizing: border-box;
    margin-top: 24rpx;

    .order-line {
      width: 100%;
      margin: 20rpx 0;
      height: 1px;
      background-color: #EEEEEE;
    }

    .order-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .value-wrap {
        display: flex;
        align-items: center;

        .value {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #1D2129;
          line-height: 40rpx;
        }

        .chevron {
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }

      .label-wrap {
        display: flex;
        align-items: center;

        .label-icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 8rpx;
        }

        .label {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #1D2129;
          line-height: 40rpx;
        }
      }
    }
  }

  .userinfo-wrap {
    box-sizing: border-box;
    width: 100%;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    padding: 16rpx;
    margin-top: 24rpx;

    .title {
      height: 40rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #1D2129;
      line-height: 40rpx;
      margin-bottom: 22rpx;
    }

    .info-list {
      display: flex;
      align-items: center;
      flex-flow: row wrap;

      .item {
        display: flex;
        align-items: center;
        margin: 0 48rpx 16rpx 0;


        .icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 8rpx;
        }

        .label, .value {
          height: 40rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #4E5969;
          line-height: 40rpx;
        }
      }
    }
  }

  .user-wrapper {
    width: 100%;
    padding: 16rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    margin-top: 32rpx;
    box-sizing: border-box;

    .bottom {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      line-height: 1;

      .location-icon {
        width: 16rpx;
        height: 20rpx;
      }

      .distance {
        font-size: 24rpx;
        font-weight: 400;
        color: #86909C;
        margin-left: 10rpx;
      }

      .pix {
        width: 20rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #C5996A;
        margin-left: 6rpx;
      }

      .price {
        font-size: 28rpx;
        font-weight: 500;
        color: #C5996A;
      }

      .label {
        height: 32rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #86909C;
        line-height: 32rpx;
      }
    }

    .top {
      display: flex;

      .avatar {
        width: 98rpx;
        height: 98rpx;
        border-radius: 50%;
        overflow: hidden;
      }


      .info {
        height: 100%;
        display: flex;
        flex-flow: column;
        margin-left: 16rpx;
        flex: 1;

        .rate {
          display: flex;
          align-items: center;

          .star-wrap {
            display: flex;
            align-items: center;

            .rate-icon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
          }

          .total {
            margin-left: 32rpx;
            height: 32rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: #86909C;
            line-height: 32rpx;
          }
        }

        .desc {
          display: flex;
          align-items: center;

          .name {
            height: 48rpx;
            font-size: 32rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
            line-height: 48rpx;
          }

          .sex {
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #86909C;
            line-height: 40rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  .banner-wrapper {
    width: 100%;
    height: 516rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;

    .count-wrap {
      position: absolute;
      bottom: 32rpx;
      right: 32rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 8rpx 16rpx;

      .img-icon {
        width: 28rpx;
        height: 28rpx;
      }

      .total {
        display: flex;
        line-height: 1;
        align-items: center;
        color: #FFFFFF;
        font-size: 24rpx;
        font-weight: 500;
        margin-left: 12rpx;
      }
    }

    .share-wrap {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      width: 48rpx;
      height: 48rpx;
      right: 32rpx;
      top: 32rpx;

      .button {
        border-radius: 0;
        background: transparent;
        outline: none;
        width: 48rpx;
        height: 48rpx;
        display: block;
        line-height: 1;
        padding: 0;
        margin: 0;

        image {
          width: 48rpx;
          height: 48rpx;
        }

        &::after {
          border: 0;
        }
      }
    }

    .swiper-container {
      width: 100%;
      height: 100%;

      .swiper-item {
        width: 100%;
        height: 100%;

        .banner {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}